<template>
	<view class="cu-modal bottom-modal" :class="modals=='couponModal'?'show':''" @tap="hideModal" @touchmove.stop.prevent="()=>{return}">
		<view class="cu-dialog" @tap.stop>
			<view class="cu-bar bg-white justify-end">
				<view class="content">{{$t('coupon.coupon')}}</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<scroll-view scroll-y :scroll-with-animation="true" :style="[{height:'calc('+500+'upx)',background:'#fff'}]">
				<view class="cu-list menu">
					<view v-for="(item,i) in cuoponList " :key="i" class="cu-item text-left" @tap="selectCoupon(item)">
						<view class="content padding-sm">
							<view>{{item.name}}</view>
							<view v-if="item.expireTime" class="text-gray text-sm">{{$t('coupon.ValidUntil')}}{{item.expireTime}}</view>
						</view>
						<view class="action">
							<text class="margin-lr-sm text-lg text-red">{{item.currencyUnit}}{{item.couponAmount}}</text>
							<text :class="couponId===item.couponId? 'cuIcon-roundcheckfill text-red' : 'cuIcon-round text-grey'" class="lg " style="font-size:38upx"></text>
						</view>
					</view>
					<view style="height:50upx;" class="bg-white"></view>
				</view>
			</scroll-view>
			<view class="bg-white">
				<button class="cu-btn block lg bg-red" style="border-radius:0" @tap="submit">{{$t('publicText.define')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,computed,getCurrentInstance} from 'vue'
	import modalMessage from '@/utils/modal.js'
	import {getLocalDate} from '@/utils/index.js'
	export default defineComponent({
		props:{
			modalName:{
				type:String,
				default:''
			},
			list:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		emits:['update:modalName','submit'],
		setup(props,{emit}){
			const {proxy} = getCurrentInstance();
			const { modalState,hideModal } = modalMessage(props,emit)
			const state = reactive({
				couponId:null,
				item:{}
			})
			const cuoponList =computed(()=>{
				let arr =props.list;
				let other = {
					checked: true,
					conditionalAmount: "0.00",
					couponAmount: "0.00",
					couponId: -1,
					currencyUnit: arr && arr.length ? arr[0].currencyUnit : '￥',
					expireTime: "",
					name: proxy.$t('coupon.NotUse'),
					useTime: null
				}
				arr.push(other)
				arr.forEach(z=>{
					z.expireTime = z.expireTime ? getLocalDate(z.expireTime,'YYYY-MM-DD') : '';
				})
				return arr;
			})
			// 优惠券选择
			const selectCoupon = (item)=>{
				const {couponId} = item;
				state.couponId = couponId;
				state.item = item
			}
			// 提交事件
			const submit = ()=>{
				modalState.modals='';
				emit('submit',state.item)
			}
			return{
				...toRefs(state),
				...toRefs(modalState),
				hideModal,
				selectCoupon,
				submit,
				cuoponList
			}
		}
	})
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
